import React, { useRef, useState } from "react";
import { Tabs } from "antd";
import { useLocation, useNavigate } from "react-router-dom";
function Tabss() {
  const navigate = useNavigate();
  const location = useLocation();
  const pathMap: any = {
    // "/": "首页",、
    "/index": "首页",
    "/detail": "详情页",
    "/list": "列表页",
    "/login": "登录页",
  };

  const currentPath = location.pathname;
  const currentLabel = pathMap[currentPath] || "首页";

  const isHome = currentPath === "/";

  const items: any[] = [
    {
      key: "/",
      label: "首页",
      closable: false,
    },
    ...(isHome
      ? []
      : [
          {
            key: currentPath,
            label: currentLabel,
            closable: true,
          },
        ]),
  ];

  const onChange = (key) => {
    navigate(key);
  };

  const handleclosed = (key) => {
    if (key !== "/home") {
      navigate("/");
    }
  };

  return (
    <div>
      <Tabs
        items={items}
        type="editable-card"
        onChange={onChange}
        activeKey={isHome ? "home" : currentPath}
        onEdit={(key, action) => {
          if (action === "remove") {
            handleclosed(key);
          }
        }}
      />
    </div>
  );
}

export default Tabss;
